<template>
    <div class="details">
        <header>
            <h1 class="tc fn pr">
                <router-link class=" pa cfff" to="/refuel/refuelList" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                洗车
            </h1>
        </header>
        <main>
            <div v-if="listInfo">
                <img :src="listInfo.gatePicture" alt="">
                <div class="info">
                    <h1 class="fn">{{ listInfo.name }}</h1>
                    <p>营业时间：周一至周五 09:00-22:00<img @click="goNavigation" src="../../../assets/img/car-refuel/plane1.png"
                            alt=""></p>
                    <p>位置：{{ listInfo.address }}<img @click="goNavigation" src="../../../assets/img/car-refuel/plane2.png" alt=""></p>
                </div>
            </div>
            <div>
                <div class="price">
                    <h1 class="fn">油价详情</h1>
                    <table>
                        <tr v-for="el in tableData">
                            <td>{{ el.number }}</td>
                            <td class="money">{{ el.price }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { refuelList } from '../../../api/using';

export default {
    data() {
        return {
            listInfo: null,
            tableData: [{
                number: '92#',
                price: '￥5.66/L'
            }, {
                number: '95#',
                price: '￥5.66/L'
            }, {
                number: '98#',
                price: '￥5.66/L',
            }, {
                number: '0#',
                price: '￥5.66/L',
            }]
        }
    },
    mounted() {
        this.init(this.$route.query);
    },
    methods: {
        init(query) {
            refuelList({
                categoryId: query.categoryId
            })
                .then(r => {
                    this.listInfo = r.data[query.index];
                })
                .catch(e => {
                })
        },
        goNavigation() {
            this.$router.push('/using/navigation');
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

header {
    background-color: #3284fc;
    height: 434rem;
    padding-top: 60rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

main>div {
    position: relative;
    top: -290rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20rem;
    background-color: #fff;
}

main>div:first-child {
    width: 710rem;
    margin-bottom: 20rem;
    padding: 30rem;
}

main>div:last-child {
    width: 710rem;
    height: 372rem;
    padding: 42rem 28rem;
}

main>div>img {
    width: 100%;
    height: 420rem;
    border-radius: 20rem;
    margin-bottom: 28rem;
}

main>div .info {
    padding-left: 5rem;
}

main>div .info h1 {
    font-size: 29rem;
    margin-bottom: 23rem;
}

main>div .info p {
    font-size: 21rem;
}

main>div .info p:nth-child(2) {
    margin-bottom: 14rem;
}

main>div .info p:nth-child(2) img {
    position: absolute;
    right: 38rem;
    bottom: 56rem;
    width: 95rem;
    height: 95rem;
}

main>div .info p:last-child img {
    width: 25rem;
    height: 26rem;
    margin-left: 25rem;
    vertical-align: middle;
}


main>div .price h1 {
    font-size: 31rem;
    margin-bottom: 8rem;
}

main>div .price table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    font-size: 22rem;
}

main>div .price table tr {
    width: 100%;
    height: 67rem;
    border-bottom: 1px solid #D9D9D9;
}

main>div .price .money {
    color: #ff9500;
}

.details .price table tr:last-child {
    border: 0;
}

.details .price table td {
    width: 50%;
}
</style>